As funções são definidas utilizando-se a palavra function, seguida do nome e lista de argumentos caso exista. (Verbo + Substantivo)
Sintaxe:
function nomeFunção([argumentos])) {
... declarações
};
// *******************************************
// Criando de forma literal
// *******************************************
let corOlhos = "azul";
function resetarCor() {
corOlhos = "verdes";
}
console.log(corOlhos);
resetarCor();
console.log(corOlhos);
| Fonte: Autoria própria |
// *******************************************
// Armazenando em uma variável
// *******************************************
let corOlhos = "azul";
const funcao2 = function resetarCor() {
return corOlhos = "verdes";
};
console.log(corOlhos);
console.log("Função2: ", funcao2());
// Outro exemplo
let y = function() {
...
};
| Fonte: Autoria própria |
// ********************************************
// Armazenando em um array
// ********************************************
let a = [ function funcaonome(a, b) {
return 1+b+a;
}, funcao1, funcao2];
// ********************************************
// Armazenando em um atributo de um objeto
// ********************************************
const obj = {}
obj.mostrar = function() {
return "Hello";
};
console.log(obj.mostrar());
| Fonte: Autoria própria |
// ********************************************
// Passando uma função como parâmetro
// ********************************************
function correr(funcao) {
funcao()
}
correr(function() { console.log('Correndo...') });
| Fonte: Autoria própria |
// ********************************************
// Uma função pode retornar/conter uma função
// ********************************************
function soma(a, b) {
return function(c) {
console.log(a + b + c);
}
};
soma(2, 3)(4);
| Fonte: Autoria própria |
maximo = prompt("Indique o numero: ");
exibirPrimo(maximo);
function exibirPrimo(maximo) {
console.log("** Números primos entre 0 e", maximo, "**");
for (let numero=2; numero <= maximo; numero++) {
if (numeroPrimo(numero)) console.log(numero);
}
}
function numeroPrimo(numero) {
for (let divisor = 2; divisor < numero; divisor++) {
if (numero % divisor === 0) {
return false;
}
}
return true;
}
const nome = prompt("Informe seu nome completo: ")
let endereco = {
logradouro : prompt("Indique o nome da rua: "),
numero : prompt("Indique o número: "),
bairro : prompt("Indique o bairro: "),
cidade : prompt("Indique cidade: "),
}
function exibir(nome, endereco) {
console.log(nome);
for (let chave in endereco)
console.log(chave, endereco[chave]);
}
exibir(nome, endereco);
// ********************************************
// Parâmetros e retornos são opcionais
// Usando template string ${ }
// ********************************************
function area(larg, alt) {
const area = larg * alt;
if (area > 20) {
console.log(`Valor ${area}m2 acima do permitido!`);
} else {
return area;
}
}
console.log(area(2,2));
console.log(area(2));
console.log(area());
console.log(area(2, 3, 22, 44, 55));
console.log(area(5, 5));
| Fonte: Autoria própria |
// ****************************
// Parâmetros variáveis
// ****************************
function soma() {
let soma = 0;
for (i in arguments) {
soma += arguments[i];
}
return soma;
}
console.log(soma(1, 2, 3));
console.log(soma(1.1, 2.3, 3.6));
console.log(soma());
console.log(soma(1));
console.log(soma(1, 2, "Teste"));
| Fonte: Autoria própria |
Observação:
let para criar variáveis que são realemnte variáveis.const para criar constantes que não serão modificadas.São um tipo de sintaxe utilizada para escrever funções de forma mais condensada.
Consulte Tipscode.
Sintaxe:
// Exemplo função sem arrow function
function myFunction() {
// ... seu codigo aqui
}
// Exemplo função sem arrow function
function meuNome(nome) {
console.log(nome);
}
meuNome("Ana Paula");
// Exemplo função com arrow function
const myFunction = () => {
// ... seu codigo aqui
}
// Exemplo função com arrow function
const meuNome = (nome) => {
console.log(nome);
}
(nome, idade, cidade).const mult = (numero) => {
return numero * 2;
}
console.log(mult(4));
// Se não tivermos mais instruções, somente um `return`, poderemos esrever assim:
const mult = numero => numero * 2;
console.log(mult(4));
// outros exemplos
let mult = function(a) {
return 2 * a;
}
console.log(mult(4));
mult = (a) => {
return 2 * a;
}
console.log(mult(4));
mult = a => 2 * a;
Para aprofundamento do assunto, consulte Pedro Araújo - Funções imediatas JavaScript (IIFE).
De acordo com [Pedro Araujo], " IIFE significa Immediately-invoked function expression ".
Por que usar funções imediatas?
Sintaxe:
(function(){})();
// Exemplo 1
(function(){
let nome = prompt("Indique seu nome: ");
let x = 'Seja bem vindo,';
console.log(x, nome);
})();
| Fonte: Autoria própria |
Factory Functions.Importante: // Funcão criarCelular, com hardcode.
function criarCelular() {
const celular = {
marcaCelular: 'ASUS',
tamanhoTela: {
vertical: 155,
horizontal: 75
},
capacidadeBateria: 5000,
ligar: function() {
console.log("Efetuando a ligação ...");
}
}
return celular;
}
const cel = criarCelular();
console.log(cel);
cel.ligar();
| Fonte: Autoria própria |
| Fonte: Autoria própria | Fonte: Autoria própria |
// Funcão criarCelular, sem hardcode, usando padrão Factory Function.
function criarCelular(marcaCelular, tamanhoTela, capacidadeBateria) {
return {
marcaCelular,
tamanhoTela,
capacidadeBateria,
ligar() {
console.log("Efetuando a ligação ...");
}
}
}
const celular1 = criarCelular('Zenfone', 5.5, 5000)
console.log(celular1);
| Fonte: Autoria própria |
| Fonte: Autoria própria | Fonte: Autoria própria |
Construct Functions são similares a Factory Function, porém são escritas de outra forma de codificação.Camel case (umDoisTres).Pascal case (UmDoisTres).new NomeFuncao( ).// Construct Functions
function Celular(marcaCelular, tamanhoTela, capacidadeBateria) {
this.marcaCelular = marcaCelular,
this.tamanhoTela = tamanhoTela,
this.capacidadeBateria = capacidadeBateria,
this.ligar = function() {
console.log("Efetuando ligação ...")
}
}
const celular = new Celular('Zenfone', 5.5, 5000)
console.log(celular);
| Fonte: Autoria própria | Fonte: Autoria própria |
// Construtor de Função
function Endereco(endereco) {
this.logradouro = endereco.logradouro,
this.numero = endereco.numero,
this.bairro = endereco.bairro,
this.cidade = endereco.cidade,
}
// variável endereco1
let endereco1 = new Endereco({
logradouro : prompt("Indique o nome da rua: "),
numero : prompt("Indique o número: "),
bairro : prompt("Indique o bairro: "),
cidade : prompt("Indique cidade: "),
});
// variável endereco2
let endereco2 = new Endereco({
logradouro : 'Avenida das margaridas',
numero : '1987',
bairro : 'Vila das Flores',
cidade : 'Bragança Paulista',
});
// funcao para verificar se os endereços são iguais
function saoIguais(endereco1, endereco2) {
// comparando propriedades
return endereco1.logradouro === endereco2.logradouro &&
endereco1.cidade === endereco2.cidade &&
endereco1.numero === endereco2.numero;
}
console.log(saoIguais(endereco1, endereco2));
// true: endereços possuem valores iguais. Digitei mesmos valores.
// Saída: true
function enderecoReferencia(endereco1, endereco2) {
// comparando endereco de memoria - referencia
return endereco1 === endereco2
}
console.log(enderecoReferencia(endereco1, endereco2));
// false: aponta para endereco de memoria diferentes
// Saída: false
// variável endereco3
const endereco3 = endereco1;
function enderecoReferencia1(endereco1, endereco3) {
// comparando endereco de memoria - referencia
return endereco1 === endereco3
}
console.log(enderecoReferencia1(endereco1, endereco3));
// true: aponta para o mesmo endereco de memoria
// Saída: true
// criando o objeto
let x = 0;
let continuar = prompt("Deseja postar? S-Sim, N-Não: ").toUpperCase;
while (continuar != 'N') {
let postagem = {
titulo: prompt("Indique o título da postagem: "),
mensagem: prompt("Informe a mensagem: "),
autor: prompt("Indique o autor: "),
visualizacoes: x +=1,
comentarios: [
{ autor: prompt("Indique autor comentário1: "), mensagem: prompt("Informe a mensagem1: ")},
{ autor: prompt("Indique autor comentário2: "), mensagem: prompt("Informe a mensagem2: ")},
],
estado: true,
};
console.log(postagem);
continuar = prompt("Deseja postar? S-Sim, N-Não: ").toUpperCase;
}
let faixas1 = [
{
tooltip : 'até R$ 700',
minimo : 0,
maximo : 700,
},
{
tooltip : 'R$ 700 até R$ 1000',
minimo : 700,
maximo : 1000,
},
{
tooltip : 'acima de R$ 1000',
minimo : 1000,
maximo : 9999999999,
}
];
console.log(faixas1);
// Resolvendo com
// Usando Factory Function
function criarFaixaPreco(tooltip, minimo, maximo) {
return {
tooltip,
minimo,
maximo,
}
}
let faixas2 = [
criarFaixaPreco('até R$ 700', 0, 700),
criarFaixaPreco('R$ 700 até R$ 1000', 700, 1000),
criarFaixaPreco('acima de R$ 1000', 1000, 9999999999),
]
console.log(faixas2);
// Resolvendo com
// Usando Contructor
function FaixaPrecos(tooltip, minimo, maximo) {
this.tooltip = tooltip,
this.minimo = minimo,
this.maximo = maximo
}
let faixas3 = new FaixaPrecos('até R$ 700', 0, 700)
console.log(faixas3);
let faixas4 = new FaixaPrecos('R$ 700 até R$ 1000', 700, 1000)
console.log(faixas4);
let faixas5 = new FaixaPrecos('acima de R$ 1000', 1000, 9999999999)
console.log(faixas5);
let faixas1 = [
{
tooltip : 'até R$ ',
minimo : 0,
maximo : prompt("Indique o valor máximo: "),
},
{
tooltip : 'R$ ',
minimo : 500,
maximo : prompt("Indique o valor máximo para segunda pesquisa: "),
},
{
tooltip : 'acima de R$ ',
minimo : 1000,
maximo : 9999999999,
}
];
faixas1[0].tooltip += String(faixas1[0].maximo);
faixas1[1].tooltip += String(faixas1[0].maximo) + ' até R$ '+ String(faixas1[1].maximo);
faixas1[1].minimo = faixas1[0].maximo;
faixas1[2].tooltip += String(faixas1[1].maximo);
faixas1[2].minimo = faixas1[1].maximo;
console.log(faixas1);
<!-- Clique em qualquer lugar -->
<p>Click this document to activate the handler.</p>
<script>
window.addEventListener("click", () => {
console.log("Você clicou?");
});
</script>
<!-- Clique do botao -->
<button>Clique</button>
<p>No handler here.</p>
<script>
let button = document.querySelector("button");
button.addEventListener("click", () => {
console.log("Botão selecionado.");
});
</script>
<!-- Clique feito uma única vez -->
<button>Clique único</button>
<script>
let button = document.querySelector("button");
function once() {
console.log("Feito.");
button.removeEventListener("click", once);
}
button.addEventListener("click", once);
</script>
<!-- Clique feito com cada um dos botões do mouse -->
<button>Clique com um dos botões do mouse</button>
<script>
let button = document.querySelector("button");
button.addEventListener("mousedown", (event) => {
if (event.button == 0) {
console.log("Botão esquerdo");
} else if (event.button == 1) {
console.log("Botão meio");
} else if (event.button == 2) {
console.log("Botão direito");
}
});
</script>
<!-- Qual botão foi clicado -->
<button>A</button>
<button>B</button>
<button>C</button>
<script>
document.body.addEventListener("click", (event) => {
if (event.target.nodeName == "BUTTON") {
console.log("Clicou", event.target.textContent);
}
});
</script>
preventDefault¶form, ele impede o envio (submit).ancora, hiperlink (<a>), ele impede a navegação.<!--
Para a maioria dos tipos de eventos, os manipuladores de eventos JavaScript são chamados antes que o comportamento padrão ocorra. Se o manipulador não quiser que esse comportamento normal aconteça, normalmente porque já cuidou de manipular o evento, ele pode chamar o preventDefault método no objeto de evento.
-->
<a href="https://developer.mozilla.org/" target="_blank">MDN</a>
<script>
let link = document.querySelector("a");
link.addEventListener("click", (event) => {
console.log(“Não executou.”);
event.preventDefault();
});
</script>
<!-- Alterna de cor ao manter um letra pressionada -->
<p>Esta página alterna para cor violeta ao manter pressionado a letra V.</p>
<script>
window.addEventListener("keydown", (event) => {
if (event.key == "v") {
document.body.style.background = "violet";
}
});
window.addEventListener("keyup", (event) => {
if (event.key == "v") {
document.body.style.background = "";
}
});
</script>
<!-- Conforme a tecla pressionada -->
<p>Pressione CTRL + barra de espaço.</p>
<script>
window.addEventListener("keydown", (event) => {
if (event.key == " " && event.ctrlKey) {
console.log("Continue!");
}
});
</script>
<!-- Marque os pontos com o clique do mouse -->
<style>
body {
height: 200px;
background: beige;
}
.dot {
height: 8px;
width: 8px;
border-radius: 4px; /* cantos arredondados */
background: blue;
position: absolute;
}
</style>
<script>
window.addEventListener("click", (event) => {
let dot = document.createElement("div");
dot.className = "dot";
dot.style.left = event.pageX - 4 + "px";
dot.style.top = event.pageY - 4 + "px";
document.body.appendChild(dot);
});
</script>
<!-- Arraste o bloco para ver a movimentacao -->
<p>
Clique e mantenha pressionado e arraste pra ver a modificação de largura
da barra.
</p>
<div style="background: orange; width: 60px; height: 20px;"></div>
<script>
let lastX; // Tracks the last observed mouse X position
let bar = document.querySelector("div");
bar.addEventListener("mousedown", (event) => {
if (event.button == 0) {
lastX = event.clientX;
window.addEventListener("mousemove", moved);
event.preventDefault(); // Prevent selection
}
});
function moved(event) {
if (event.buttons == 0) {
window.removeEventListener("mousemove", moved);
} else {
let dist = event.clientX - lastX;
let newWidth = Math.max(10, bar.offsetWidth + dist);
bar.style.width = newWidth + "px";
lastX = event.clientX;
}
}
</script>
<!-- Uso de barra de progresso na parte superior a medida que rola o scroll -->
<style>
#progress {
border-bottom: 6px solid blue;
width: 0;
position: fixed;
top: 0;
left: 0;
}
</style>
<div id="progress"></div>
<script>
// Create some content
document.body.appendChild(
document.createTextNode("Diversas linhas ".repeat(1000))
);
let bar = document.querySelector("#progress");
window.addEventListener("scroll", () => {
let max = document.body.scrollHeight - innerHeight;
bar.style.width = `${(pageYOffset / max) * 100}%`;
});
</script>
<!-- Indicação do que deve ser digitado -->
<p>Nome: <input type="text" data-help="Seu nome" /></p>
<p>Idade: <input type="text" data-help="Sua idade" /></p>
<p id="help"></p>
<script>
let help = document.querySelector("#help");
let fields = document.querySelectorAll("input");
for (let field of Array.from(fields)) {
field.addEventListener("focus", (event) => {
let text = event.target.getAttribute("data-help");
help.textContent = text;
});
field.addEventListener("blur", (event) => {
help.textContent = "";
});
}
</script>
<!-- Indicação do conteúdo do nome digitado -->
<p>Nome: <input type="text" data-help="Seu nome" id="input" /></p> <---- Adicionado id="input"
<p>Idade: <input type="text" data-help="Sua idade" /></p>
<p id="help"></p>
<p><span id="result"></span></p> <---- Adicionado
<script>
<!-- Adicionado -->
input.oninput = function () {
result.innerHTML = input.value;
};
<!-- Fim Adicionado -->
let help = document.querySelector("#help");
let fields = document.querySelectorAll("input");
for (let field of Array.from(fields)) {
field.addEventListener("focus", (event) => {
let text = event.target.getAttribute("data-help");
help.textContent = text;
});
field.addEventListener("blur", (event) => {
help.textContent = "";
});
}
</script>
<!-- Contagem com setInterval -->
<script>
let ticks = 0;
let clock = setInterval(() => {
console.log("tick", ticks++);
if (ticks == 10) {
clearInterval(clock);
console.log("stop.");
}
}, 200);
</script>
ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.